<template>
  <div class="user">
    <div class="header">
      <h1>邀请成员加入企业</h1>
      <div class="adduser">
        <span>创建并分享邀请链接，邀请成员加入企业</span>
        <el-button @click="GetRegisterCode" type="text" size="small" class="GetRegisterCode">
          <el-button type="text" @click="dialogFormVisible = true" class="button">邀请成员</el-button>
        </el-button>
      </div>
      <el-dialog title="分享验证码" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <div class="title">
            <h2>
              <i class="el-icon-success"></i>邀请码已创建
            </h2>
            <h4>您可以将邀请码分享至QQ、微信、钉钉等工作群，同事们通过此邀请码进行验证。</h4>
          </div>
          <el-form-item :label-width="formLabelWidth">
            <span style="margin-left:0px">注册邀请码：</span>
            <el-input v-model="form.code" auto-complete="off" style="width:300px">{{form.code}}</el-input>
            <el-button
              class="tag-read"
              :data-clipboard-text="form.code"
              @click="copy"
              type="text"
              size="small"
            >
              <el-button
                @click="dialogFormVisible = false"
                style="margin:10px;border:1px solid #323232"
                :plain="true"
              >复制</el-button>
            </el-button>
          </el-form-item>
        </el-form>
        <span>注意:该邀请码有效时长为72小时!</span><br><br>
        <span>被邀请用户注册时需要进行邀请码和公司名称进行验证,请注意保持一致!</span>
      </el-dialog>
    </div>
    <div class="search">
      <div class="text">
        <h1>所有成员（0）</h1>
        <el-input
          placeholder="搜索成员"
          prefix-icon="el-icon-search"
          v-model="input21"
          style="width:300px; float: left;"
        ></el-input>
      </div>
      <el-table :data="tableData" border style="width: 100%; text-align: center;">
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="name" label="企业角色"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="createDate" label="加入企业时间"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="operationClick(scope.row,'isUse')"
              type="text"
              size="small"
              v-if="isAdmin"
            >{{scope.row.isEnable===1?"禁用":"启用"}}</el-button>
            <el-button
              type="text"
              size="small"
              v-if="isAdmin"
              @click="operationClick(scope.row,'del')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { axiosPost, axiosGet } from "@/api/index.js";
import Clipboard from "clipboard";
export default {
  data() {
    return {
      input21: "",
      tableData: [],
      dialogFormVisible: false,
      isAdmin: localStorage.getItem("isAdmin") == 1,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  beforeMount() {
    //获取用户邀请码
    this.GetStaffList();
    // axiosGet("/Account/GetStaffList", this.tableData).then(res => {
    //   if (res.status === 200 && res.data.success) {
    //     this.tableData = res.data.data;
    //     // console.log(this.form.code);
    //   }
    // });
  },
  methods: {
    GetRegisterCode() {
      //获取用户邀请码
      axiosGet("Account/GetRegisterCode", null).then(res => {
        if (res.status === 200 && res.data.success) {
          this.form = res.data.data;
          // console.log(this.form.code);
        }
      });
    },

    //获取用户列表
    GetStaffList: function() {
      axiosGet("/Account/GetStaffList", this.tableData).then(res => {
        if (res.status === 200 && res.data.success) {
          this.tableData = res.data.data;
          // console.log(this.form.code);
        }
      });
    },

    //点击复制按钮实现复制文本框内容
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        // alert("复制成功");
        this.$message({
          message: "恭喜你，复制成功!",
          type: "success"
        }); // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        // console.log("该浏览器不支持自动复制"); // 释放内存
        clipboard.destroy();
      });
    },

    //操作的方法  type  表示操作类型   是删除还是启用禁用
    operationClick(item, type) {
      if (item.account == localStorage.getItem("account")) {
        this.$message.error("不能对自己的账户进行操作");
        return;
      }
      if (type == "del") {
        // console.log("删除-----");
        var bean = {
          id: item.id
        };
        //删除某个成员 删除成功之后调用列表接口
        axiosGet("Account/DeleteStaff", bean).then(res => {
          if (res.status == 200 && res.data.success) {
            // console.log(res.data.data);
            this.GetStaffList();
          }
        });
      } else {
        // console.log("启用或禁用-----");

        var enable = 0;
        if (item.isEnable == 1) {
          enable = 0;
        } else {
          enable = 1;
        }
        var bean = { id: item.id, isEnable: enable };

        //禁用或启用    成功之后调用列表接口
        axiosGet("Account/DisEnableStaff", bean).then(res => {
          if (res.status == 200 && res.data.success) {
            // console.log(res.data.data);
            this.GetStaffList();
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  width: 95%;
  height: 100%;
  padding: 30px;
  .header {
    padding: 30px 50px;
    background-color: #fff;
    h1 {
      font-weight: 700;
      font-size: 20px;
      //   padding: 30px 50px;
    }
    .adduser {
      margin: 20px 0 0 0;
      border: 1px solid rgb(10, 10, 10);
      span {
        margin: 60px 0 0 0;
        display: block;
        text-align: center;
        font-size: 20px;
      }
      .button {
        margin: 20px 520px 80px;
        padding: 15px 30px;
        color: #fff;
        background-color: #323232;
      }
    }
    .title {
      i {
        margin: 0 5px;
        font-size: 30px;
      }
      h2 {
        margin: -5px 5px;
        font-size: 20px;
        font-weight: 600;
      }
      h4 {
        margin: 10px 44px 20px;
      }
    }
  }
  .search {
    margin: 15px 0;
    padding: 20px 30px;
    background-color: #fff;
    .text {
      h1 {
        padding: 10px;
        font-weight: 700;
        font-size: 20px;
        float: left;
      }
    }
    .el-table {
      margin: 65px 0;
      text-align: center;
    }
  }
}
</style>
